/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-06-25 15:04:01
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-02 15:16:34
 * @FilePath: \cxl-h5\src\utils\chart\histogramChart.ts
 */
import BaseChart from './baseChart'

export default class HistogramChart extends BaseChart {
    //钱
    xAxis: number[] = []
    count: number[] = []
    //X轴最大的金额
    maxMoney = 0
    //年
    yAxis: number[] = []
    marginBottom = this.calculateRatio(50)
    marginTop = this.calculateRatio(50)
    marginRight = this.calculateRatio(10)
    marginLeft = this.calculateRatio(60)
    textmarginLeft = this.calculateRatio(50)
    viewHeight = this.w_Height - this.marginTop - this.marginBottom
    viewWidth = this.w_Width - this.marginLeft - this.marginRight
    moveX = 0
    //定时器
    timer = 0
    //文字大小
    fontSize = 12
    constructor(eleName: string, xAxis: number[], count: number[], yAxis: number[]) {
        super(eleName)
        this.xAxis = xAxis
        this.yAxis = yAxis
        this.count = count
        this.maxMoney = Math.max(...this.xAxis)

        this.drawMoney()
        this.drawYear()
        this.fillAxisText('金额（元）', this.marginLeft / 2, this.calculateRatio(30))
        this.fillAxisText('年份', this.marginLeft * 0.8, this.w_Height - this.marginTop + this.calculateRatio(20))
        this.drawHistogram()
        this.drawPoint()
    }
    drawMoney() {
        //绘制Y轴 水平线
        for (let i = 0; i <= 5; i++) {
            this.ctx.save()
            this.ctx.translate(0, this.w_Height)
            this.ctx.beginPath()
            this.ctx.fillStyle = '#000000'
            this.ctx.textAlign = 'right'
            this.ctx.textBaseline = 'middle'
            this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
            this.ctx.fillText(
                (this.maxMoney / 5) * i + '',
                this.textmarginLeft,
                -this.marginBottom - (this.viewHeight / 5) * i
            )
            this.ctx.closePath()

            //水平横线

            this.ctx.restore()

            this.dottedLine(
                this.marginLeft,
                -this.marginBottom - (this.viewHeight / 5) * i,
                this.w_Width - this.marginRight
            )
        }
    }
    dottedLine(x1: number, y1: number, x2: number) {
        //虚线的宽度
        const m = this.calculateRatio(5)
        //虚线的间隔
        const n = this.calculateRatio(3)
        //判断两点之间存在多少个虚线
        const len = Math.ceil((x2 - x1) / (m + n))

        this.ctx.save()
        this.ctx.translate(0, this.w_Height)
        let startX = x1
        for (let i = 0; i < len; i++) {
            this.ctx.beginPath()
            this.ctx.fillStyle = '#999999'
            this.ctx.moveTo(startX, y1)
            this.ctx.lineTo(startX + m, y1)
            startX = startX + m + n
            this.ctx.stroke()
            this.ctx.closePath()
        }

        this.ctx.restore()
    }
    drawYear() {
        //绘制X轴
        for (let i = 0; i < this.yAxis.length; i++) {
            this.ctx.save()
            this.ctx.translate(0, this.w_Height)
            this.ctx.beginPath()
            this.ctx.fillStyle = '#000000'
            this.ctx.textAlign = 'center'
            this.ctx.textBaseline = 'middle'
            this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
            this.ctx.fillText(
                this.yAxis[i] + '',
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginTop + this.calculateRatio(20)
            )
            this.ctx.closePath()

            this.ctx.restore()
        }
    }
    drawHistogram() {
        //绘制柱状图
        this.ctx.save()
        this.ctx.translate(0, this.w_Height)
        this.ctx.strokeStyle = '#0866E6'
        for (let i = 0; i < this.yAxis.length; i++) {
            this.ctx.beginPath()
            this.ctx.lineWidth = this.calculateRatio(25)
            this.ctx.moveTo(
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginBottom
            )
            this.ctx.lineTo(
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginBottom - (this.xAxis[i] * this.viewHeight) / this.maxMoney
            )
            this.ctx.stroke()
            this.ctx.closePath()
        }

        this.ctx.restore()
    }
    fillAxisText(text: string, x: number, y: number) {
        this.ctx.beginPath()
        this.ctx.fillStyle = '#999999'
        this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
        this.ctx.textAlign = 'center'
        this.ctx.fillText(text, x, y)
        this.ctx.fill()
        this.ctx.closePath()
    }
    //绘制数据年份的数据
    fillMoneyText(i: number) {
        this.ctx.beginPath()
        this.ctx.fillStyle = '#0866E6'
        this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
        this.ctx.textAlign = 'center'
        // const y = i == this.xAxis.length - 1 ? this.calculateRatio(-12) : this.calculateRatio(25)
        if (this.xAxis[i] > 0) {
            this.ctx.fillText(
                `≈${this.xAxis[i]}（${this.count[i]}次）`,
                this.marginLeft +
                    this.viewWidth / this.yAxis.length / 2 +
                    (this.viewWidth / this.yAxis.length) * i +
                    this.calculateRatio(6),
                -this.marginBottom - (this.xAxis[i] * this.viewHeight) / this.maxMoney - this.calculateRatio(10)
            )
            this.ctx.fill()
        }
        this.ctx.closePath()
    }
    //绘制数据年份
    drawPoint() {
        this.ctx.save()
        this.ctx.translate(0, this.w_Height)
        this.ctx.fillStyle = '#ffffff'
        this.ctx.strokeStyle = '#0866E6'
        this.ctx.lineWidth = this.calculateRatio(2)
        this.fillMoneyText(0)
        for (let i = 1; i < this.yAxis.length; i++) {
            this.fillMoneyText(i)
        }
        this.ctx.restore()
    }
}
